import styles from '../styles.less';
import {Dropdown, Image, Pagination, Space, Table, Tag} from 'antd';
import {useCallback, useEffect} from 'react';
import {connect} from 'umi';
import {nowrapColumns} from '@/utils/utils';
import {DownOutlined} from "@ant-design/icons";
import {useAccess} from "@@/exports";

const DataTable = (props) => {

  const access = useAccess();
  const {dispatch, dataTable, loading} = props;
  const {setDetail, setVerifys, tablePayload, setTablePayload} = props.data;

  /* 查看详情 */
  function detail(e, record) {
    e.preventDefault();
    setDetail({
      visible: true,
      title: '查看详情',
      data: record,
    });
    return false;
  }

  /* 核销记录 */
  function verifys(record) {
    setVerifys({
      visible: true,
      title: '核销记录',
      data: record,
    });
  }

  /* 获取列表 */
  const fetchList = useCallback((payload) => {
    dispatch({
      type: 'POrderInstore/fetchList',
      payload: payload,
    });
  }, [dispatch]);

  /* 查询监听 */
  useEffect(() => {
    fetchList(tablePayload);
  }, [fetchList, tablePayload]);

  const columns = [
    {
      title: '序号',
      align: 'center',
      width: 70,
      fixed: 'left',
      render: ({}, {}, index) => (
        <span>
          {(tablePayload.pageNum - 1) * tablePayload.pageSize + index + 1}
        </span>
      ),
    },
    {
      title: '订单详情',
      dataIndex: 'userOrderDetail',
      align: 'center',
      ellipsis: true,
      width: 300,
      render: (_, record) => {
        if (!record.userOrderDetail) {
          return '暂无';
        }
        return (
          <div style={{display: "flex", alignItems: 'center'}}>
            <Image
              style={{width: 44, height: 44}} src={record.userOrderDetail.cover}
              fallback=""
            />
            <div style={{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-around',
              marginLeft: 12
            }}>
              <div style={{
                width: 248,
                fontSize: 12,
                textAlign: 'left',
                wordBreak: 'break-all',
                wordWrap: 'break-word',
                whiteSpace: 'pre-wrap'
              }}>{record.userOrderDetail.title}</div>
              <div style={{
                color: '#888',
                width: 248,
                fontSize: 12,
                textAlign: 'left',
                wordBreak: 'break-all',
                wordWrap: 'break-word',
                whiteSpace: 'pre-wrap'
              }}>{record.userOrderDetail.subTitle}</div>
            </div>
          </div>
        );
      },
    },
    {
      title: '用户信息',
      dataIndex: 'userInfo',
      align: 'center',
      ellipsis: true,
      width: 200,
      render: (_, record) => {
        if (!record.userInfo) {
          return '暂无';
        }
        return (
          <div style={{display: "flex", alignItems: 'center'}}>
            <Image
              style={{width: 44, height: 44}} src={record.userInfo.avatar}
              fallback=""
            />
            <div style={{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-around',
              marginLeft: 12
            }}>
              <div style={{
                width: 148,
                fontSize: 12,
                textAlign: 'left',
                wordBreak: 'break-all',
                wordWrap: 'break-word',
                whiteSpace: 'pre-wrap'
              }}>{record.userInfo.name}</div>
              <div style={{
                width: 148,
                fontSize: 12,
                textAlign: 'left',
                wordBreak: 'break-all',
                wordWrap: 'break-word',
                whiteSpace: 'pre-wrap'
              }}>{record.userInfo.realName}</div>
              <div style={{
                color: '#888',
                width: 148,
                fontSize: 12,
                textAlign: 'left',
                wordBreak: 'break-all',
                wordWrap: 'break-word',
                whiteSpace: 'pre-wrap'
              }}>{record.userInfo.mobile}</div>
            </div>
          </div>
        );
      },
    },
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      align: 'center',
      render: (_, record) => {
        return (
          <span>{record.orderNo ? record.orderNo : '-'}</span>
        );
      },
    },
    {
      title: '支付金额',
      dataIndex: 'actualAmount',
      align: 'center',
      ellipsis: true,
      render: (_, record) => {
        return (
          <span style={{color: 'orangered'}}>{(record.actualAmount / 100).toFixed(2)}</span>
        );
      },
    },
    {
      title: '下单时间',
      dataIndex: 'createTime',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      align: 'center',
      ellipsis: true,
      render: (_, record) => {
        switch (record.status) {
          case 0:
            if (record.cancelStatus === 1) {
              return <Tag>已取消</Tag>;
            } else if (record.expireStatus === 1) {
              return <Tag>已超时</Tag>;
            } else {
              return <Tag color={'#f50'}>待付款</Tag>;
            }
          case 1:
            return <Tag color={'#87d068'}>待使用</Tag>;
          case 2:
            return <Tag color={'#108ee9'}>已完成</Tag>;
          case 3:
            return <Tag color={'volcano'}>退款中</Tag>;
          case 4:
            return <Tag color={'magenta'}>已退款</Tag>;
        }
      },
    },
    {
      title: '付款时间',
      dataIndex: 'timePaid',
      align: 'center',
      ellipsis: true,
      render: (_, record) => {
        return (
          <span>{record.timePaid ? record.timePaid : '-'}</span>
        );
      },
    },
    {
      title: '备注信息',
      dataIndex: 'remark',
      align: 'center',
      ellipsis: true,
      render: (_, record) => {
        return (
          <span>{record.remark ? record.remark : '-'}</span>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      align: 'center',
      width: 100,
      fixed: 'right',
      render: (_, record) => {
        let items = [];
        if (access?.user_orderVerify_list) {
          items = [...items, {
            key: 'verifys',
            label: '核销记录',
            onClick: () => verifys(record)
          }];
        }

        return (
          <div style={{display: 'flex', textAlign: 'center', justifyContent: 'center'}}>
            <Space size='small'>
              <a onClick={e => detail(e, record)}>详情</a>
            </Space>
            {(items.length > 0) && (
              <div style={{marginLeft: 12}}>
                <Dropdown arrow menu={{items}}>
                  <a onClick={(e) => e.preventDefault()}>
                    更多<DownOutlined/>
                  </a>
                </Dropdown>
              </div>
            )}
          </div>
        )
      },
    },
  ];

  return (
    <>
      <div className={styles.myDataTable}>
        <Table
          className={styles.myTable} bordered={false} size={'middle'} columns={nowrapColumns(columns, dataTable.list)}
          dataSource={dataTable.list} rowKey={'id'}
          pagination={false} scroll={{y: '100%'}} loading={loading}
        />
      </div>
      <Pagination
        pageSize={tablePayload.pageSize} current={tablePayload.pageNum} total={dataTable.total}
        className={styles.myPagination} size={'default'} hideOnSinglePage={false}
        showTotal={(total) => {
          return `共 ${total} 条记录`;
        }}
        pageSizeOptions={[10, 30, 60, 120]}
        showSizeChanger showQuickJumper={true}
        onChange={(page, pageSize) => {
          setTablePayload({...tablePayload, pageNum: page, pageSize: pageSize});
        }}
      />
    </>

  );
};

export default connect(({loading, POrderInstore}) => {
  return {
    loading: loading.effects['POrderInstore/fetchList'],
    dataTable: POrderInstore.dataTable,
  };
})(DataTable);
